import QtQuick 2.0


//除了duration属性与easing.type属性，也可以对动画进行微调。
//例如PropertyAnimation属性，大多数动画都支持附加的easing.amplitude（缓冲振幅） ，
//easing.overshoot（缓冲溢出） ，easing.period（缓冲周期） ，
//这些属性允许你对个别的缓冲曲线进行微调。不是所有的缓冲曲线都支持这些参数。
//可以查看Qt PropertyAnimation文档中的缓冲列表（easing table）
//来查看一个缓冲曲线的相关参数。



DarkSquare {
    id:root
    width:600
    height:340

    property variant easings: [
        "Linear", "InQuad", "OutQuad", "InOutQuad",
        "InCubic", "InSine", "InCirc", "InElastic",
        "InBack", "InBounce" ]

    Grid {
        id: container
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: 40
        height: 200
        columns:5
        spacing: 30

        Repeater {
            model: easings
            ClickableImageV3{
                width: 90
                height: 30
                framed:true
                Text {
                    text: qsTr(modelData)
                }
                source: "curves/" + modelData + ".png"
                onClicked: {
                    anim.easing.type = modelData
                    anim.restart()
                }
            }
        }
    }

    RedSquare {
        id: square
        x:40;y:260
    }

    NumberAnimation {
        id:anim
        target: square
        from: 40; to: root.width - 40 - square.width
        properties: "x"
        duration: 2000
    }
}
